<script setup>
import { ref } from "vue";
import router from "@/router/index.js";
import { ArrowRight } from "@element-plus/icons-vue";
import userNameApi from "@/api/UserNameApi.js";
import adminApi from "@/api/AdminApi.js";
import jwtApi from "@/api/JwtApi.js";
const activeIndex = ref("1");

// 定义菜单信息
// 菜单  用户管理， 分类管理， 商品管理
const menuData = ref([
  {
    name: "植物管理",
    icon: "GobletFull",
    children: [{ name: "植物信息", icon: "GobletSquareFull", path: "/plant" },
      {name:"植物分类", icon: "GobletSquareFull", path: "/plantCategory"},
      { name: "种植方式", icon: "GobletSquareFull", path: "/plantMethod" }],
  },
  {
    name: "植物识别",
    icon: "Notebook",
    children: [
      { name: "植物识别", icon: "Document", path: "/plantIdent" }
    ],
  },
  {
    name: "课题管理",
    icon: "User",
    children: [{ name: "选择实验", icon: "UserFilled", path: "/topic" },
      { name: "实验进展", icon: "UserFilled", path: "/experiment" }],
  },
  {
    name: "文献检索",
    icon: "Avatar",
    children: [
      { name: "在线检索", icon: "List", path: "/literature" }
    ],
  },
  {
    name: "用户管理",
    icon: "User",
    children: [{ name: "导师管理", icon: "User", path: "/researcher" },
      { name: "学生管理", icon: "User", path: "/student" }],
  },
  {
    name: "数据统计",
    icon: "Setting",
    children: [{ name: "数据报表", icon: "Setting", path: "setting" }],
  },
]);
// 面包屑
const breadcrumbList = ref([]);
// 监听路由变化，更新面包屑
router.afterEach((to) => {
  breadcrumbList.value = createBreadcrumb(to.path);
});
// 创建面包屑的方法
function createBreadcrumb(path) {
  // 根据你的路由和菜单数据创建面包屑
  let matched = [];
  menuData.value.forEach((menu) => {
    if (menu.children) {
      const child = menu.children.find((c) => c.path === path);
      if (child) {
        matched = [menu.name, child.name];
      }
    }
  });
  return matched;
}

// 用户下拉菜单的点击
function handleSelect(key, keyPath) {
  if (key == "logout") {
    // 用户退出
    logout();
  }
}
// 左侧菜单动作
function handleMenu(key) {
  if (key) {
    router.push(key);
  }
}
const isCollapse = ref(false);

// 点击用户菜单时触发
function AdminMenuSelect(menu) {
  if (menu === "logout") {
    jwtApi.remove(); // 删除jwt
    userNameApi.remove(); //删除用户名
    router.push("/login");
  }
  if (menu === "editInfo") {
    // userName
    show.value = true;
  }
}
// 取出用户名完成数据响应
const userName = userNameApi.get();

// 对话框是否显示
const show = ref(false);
let sfRef;
// 关闭对话框，重置表单
function close() {
  sfRef.resetFields();
}
// 定义对话框内容
const adminFormModel = ref({
  loginName: "",
  loginPassword: "",
  nickName: "",
});
// 对话框内容别名
const afm = adminFormModel;
adminApi.findByUserName(userName).then((resp) => {
  console.log(resp);
  if (resp.code == 200) {
    afm.value = resp.data;
  } else {
    ElMessage({
      type: "error",
      message: "用户信息查询失败",
    });
  }
});

// 提交表单
function submitForm() {
  let admin = afm.value;
  //修改
  adminApi.update(admin).then((resp) => {
    console.log(resp);
    if (resp.code == 0) {
      ElMessage({
        type: "success",
        message: "修改成功",
      });
      window.location.reload();
    } else {
      ElMessage({
        type: "error",
        message: resp.msg,
      });
    }
  });
  show.value = false;
}
</script>


<template>
  <el-container class="outer">
    <!-- 侧边栏-->
    <el-aside :width="'1'" style="background-color: #20222c">
      <!-- 折叠按钮 -->
      <div
          style="
          height: 60px;
          line-height: 60px;
          text-align: right;
          color: #fff;
          font-size: 20px;
          margin-right: 24px;
        "
      >
        <el-icon @click="isCollapse = !isCollapse">
          <Expand v-if="isCollapse"></Expand>
          <Fold v-else></Fold>
        </el-icon>
      </div>
      <el-menu
          active-text-color="#ffd04b"
          background-color="#20222c"
          class="el-menu-vertical-demo"
          default-active="/charts"
          text-color="#fff"
          :collapse="isCollapse"
          @select="handleMenu"
      >
        <!-- 动态生成菜单 -->
        <!-- 父菜单内容 -->
        <el-sub-menu
            v-for="(menu, index) in menuData"
            :index="index.toString()"
        >
          <template #title>
            <component
                class="icons"
                :is="menu.icon"
                style="width: 1em; height: 1em; margin-right: 8px"
            >
            </component>
            <span>{{ menu.name }}</span>
          </template>
          <!-- 子菜单内容 -->
          <el-menu-item
              v-for="(child, ind) in menu.children"
              :index="child.path"
          >
            <el-icon><component :is="child.icon"> </component></el-icon>
            <span>{{ child.name }}</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <el-container>
      <!-- 头部 -->
      <el-header class="header">
        <div class="mb">
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item
                style="font-size: 15px; line-height: 70px"
                v-for="(item, index) in breadcrumbList"
                :key="index"
                :to="{ path: '/' }"
            >
              {{ item }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="demo-type">
          <el-avatar icon="UserFilled" />
        </div>
        <div class="session">
          <el-menu
              background-color="#f3f8fe"
              style="width: 100%; height: 68px"
              mode="horizontal"
              :ellipsis="false"
              @select="AdminMenuSelect"
          >
            <el-sub-menu index="admin">
              <!-- TODO -->
              <template #title> {{ userName }} </template>
              <el-menu-item index="editInfo">修改信息</el-menu-item>
              <el-menu-item index="logout">退出</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </div>
      </el-header>
      <!-- 主体 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

  <!-- 用户修改表单弹窗 -->
  <el-dialog
      v-model="show"
      title="修改管理员信息"
      width="500"
      draggable
      :close-on-click-modal="false"
      @close="close"
  >
    <el-form ref="sfRef" :model="afm">
      <el-form-item
          label="用户名:"
          label-width="100"
          prop="loginName"
          style="width: 80%"

          :rules="[
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur',
          },
        ]"
      >
        <el-input v-model="afm.loginName" :disabled="true" />
      </el-form-item>

      <el-form-item
          label="登陆昵称:"
          label-width="100"
          prop="nickName"
          style="width: 80%"
      >
        <el-input v-model="afm.nickName" />
      </el-form-item>

      <el-form-item
          label="密码:"
          label-width="100"
          prop="loginPassword"
          style="width: 80%"
      >
        <el-input v-model="afm.loginPassword" />
      </el-form-item>
    </el-form>
    <!-- 对话框按钮，#插槽: 组件空出来，允许用户更改组件内容。由组件使用者定义 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="show = false">取消</el-button>
        <el-button type="primary" @click="submitForm"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style scoped>
.outer {
  height: 100vh;
  border: 1px solid #ccc;
}

.outer .el-main {
  background-color: #e9eef3;
  color: #333;
}

.el-main {
  padding: 0px;
}

.el-menu {
  border-width: 0px;
}
.header {
  background-color: #f3f8fe;
  border-bottom: 1px solid #999;
  height: 70px;
  display: flex;
  flex-direction: row;
}
.header > .mb {
  flex-grow: 1;
  line-height: 70px;
}
.header > .demo-type {
  flex-grow: 1;
  text-align: right;
  line-height: 70px;
}

.header > .session {
  flex-shrink: 0;
  height: 70px;
}
</style>